<template>
  <el-table  :data="displayParameterList"  row-key="id" @row-click="handleRowClick">
    <el-table-column label="参数名称" align="center" prop="parameterName" />
    <el-table-column label="参数描述" align="center" prop="parameterDesc" />
    <el-table-column label="业务是否可见" align="center" prop="isFrontpageVisible" :formatter="formatFrontPageVisible" />
    <el-table-column label="参数类型" align="center" prop="parameterType" :formatter="formatParameterType" />
    <el-table-column label="参数格式" align="center" prop="parameterFormat" />
    <el-table-column label="参数值" align="center"  prop="parameterValue">
      <template #default="scope" >
        <div v-show="showParameterInput(scope.row)">
<!--        <ComponentInput  :selectVariable="scope.row.parameterValue||''" @change="changeParameterValue" />-->
          <BindComponentInput :bindComponent="scope.row.parameterValue||''" :multiple="false" @change="changeParameterValue"/>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <div class="dialog-footer">
    <el-button type="primary" @click="submitForm">确 定</el-button>
    <el-button @click="cancel">取 消</el-button>
  </div>
</template>

<script lang="ts" setup>
import {computed, getCurrentInstance, ref, watch} from "vue";
import ComponentInput from "@/components/common/selector/component/ComponentInput.vue";
import BindComponentInput from "@/components/common/selector/bindcomponent/BindComponentInput.vue";
const { proxy } = getCurrentInstance();
const { parameter_type } = proxy.useDict("parameter_type");
const currentRow = ref({})
interface Props {
  parameterList: object
}
const parameterList = ref(props.parameterList)
// 原始参数列表（保存所有数据）
const originalParameterList = ref([])
// 显示用的参数列表（只包含业务可见的行）
const displayParameterList = computed(() => {
  return filterVisibleParameters(originalParameterList.value);
});
function filterVisibleParameters(list) {
  return list
      .filter(item => item.isFrontpageVisible === 'Y') // 过滤当前层级
      .map(item => {
        // 如果有子级，递归处理
        if (item.children && item.children.length) {
          return {
            ...item,
            children: filterVisibleParameters(item.children)
          };
        }
        return item;
      });
}

const props = defineProps<Props>()
interface Emits {
  (e: 'ok', val: object): void
  (e: 'cancel'): void
}
const emits = defineEmits<Emits>()
watch(() => [props.parameterList], () => {
  if(props.parameterList.value) {
    originalParameterList.value = props.parameterList.value;
  }else{
    originalParameterList.value = props.parameterList;
  }
  console.log('parameterList in InterfaceParameter.vue', JSON.stringify(parameterList.value))
}, { immediate: true })

function submitForm(){
  emits('ok', originalParameterList);
}
function cancel(){
  emits('cancel');
}

/**
 * 改变当前行参数值
 * @param value
 */
function changeParameterValue(value){
  currentRow.value.parameterValue = "${"+value+"}";
}

/**
 * 记录当前行
 */
function handleRowClick(row, column, event){
  currentRow.value = row;
}
/**
 * 翻译参数类型
 * @param row
 * @param column
 * @returns {*|string}
 */
function  formatParameterType(row, column){
  return parameter_type.value.find(k => k.value === row.parameterType)?.label ?? '';
}
/**
 * 翻译业务是否可见
 * @param row
 * @param column
 * @returns {*|string}
 */
function  formatFrontPageVisible(row, column){
  if(row.isFrontpageVisible=='Y'){
    return '是'
  }else{
    return '否';
  }
}
/**
 * 显示参数输入框
 * @param row
 */
function showParameterInput(row){
  if(row.parameterType!='object' && row.parameterType!='array'){
    return true;
  }else{
    return false;
  }
}

</script>

<style scoped>

</style>
